<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超级贪吃蛇游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <h1>🐍 超级贪吃蛇</h1>
            <div class="game-stats">
                <div class="stat-item">
                    <span class="stat-label">分数</span>
                    <span id="score" class="stat-value">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">等级</span>
                    <span id="level" class="stat-value">1</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">长度</span>
                    <span id="length" class="stat-value">1</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">最高分</span>
                    <span id="highScore" class="stat-value">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">模式</span>
                    <select id="modeSelect" class="mode-select">
                        <option value="classic" selected>经典</option>
                        <option value="wrap">穿墙</option>
                        <option value="timed">计时</option>
                        <option value="obstacles">障碍</option>
                    </select>
                </div>
                <div class="stat-item" id="timerBox" style="display:none;">
                    <span class="stat-label">剩余时间</span>
                    <span id="timeLeft" class="stat-value">60</span>
                </div>
            </div>
        </header>
        
        <div class="game-area">
            <canvas id="gameCanvas" width="500" height="500"></canvas>
            <div class="game-overlay" id="gameOverlay">
                <div class="overlay-content">
                    <h2 id="overlayTitle">准备开始游戏</h2>
                    <p id="overlayMessage">按空格键开始游戏</p>
                    <div class="overlay-buttons">
                        <button id="startBtn" class="btn btn-primary">开始游戏</button>
                        <button id="pauseBtn" class="btn btn-secondary" style="display: none;">暂停</button>
                        <button id="helpBtn" class="btn btn-info">游戏帮助</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="game-controls">
            <div class="control-info">
                <p>使用方向键或WASD控制蛇的移动</p>
                <p>按空格键暂停/继续游戏</p>
            </div>
        </div>
    </div>

    <!-- 帮助模态框 -->
    <div id="helpModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>🎮 游戏帮助</h2>
                <span class="close" id="closeHelp">&times;</span>
            </div>
            <div class="modal-body">
                <div class="help-section">
                    <h3>🎯 游戏目标</h3>
                    <p>控制贪吃蛇吃掉食物，让蛇变得越来越长，获得更高的分数！</p>
                </div>
                
                <div class="help-section">
                    <h3>🎮 操作方法</h3>
                    <ul>
                        <li><strong>方向键</strong> 或 <strong>WASD</strong> - 控制蛇的移动方向</li>
                        <li><strong>空格键</strong> - 暂停/继续游戏</li>
                        <li><strong>鼠标点击</strong> - 点击按钮进行游戏操作</li>
                    </ul>
                </div>

                <div class="help-section">
                    <h3>🍎 食物类型</h3>
                    <ul>
                        <li><span class="food-item red">●</span> <strong>普通食物</strong> - 10分，让蛇增长1节</li>
                        <li><span class="food-item gold">●</span> <strong>黄金食物</strong> - 50分，让蛇增长2节</li>
                        <li><span class="food-item blue">●</span> <strong>特殊食物</strong> - 100分，让蛇增长3节</li>
                        <li><span class="food-item rainbow">●</span> <strong>彩虹食物</strong> - 200分，让蛇增长5节</li>
                    </ul>
                </div>

                <div class="help-section">
                    <h3>⚡ 游戏规则</h3>
                    <ul>
                        <li>蛇不能撞到墙壁或自己的身体</li>
                        <li>每吃10个食物，游戏等级提升，速度加快</li>
                        <li>蛇越长，移动速度越快，挑战越大</li>
                        <li>获得最高分记录，挑战自己的极限！</li>
                    </ul>
                </div>

                <div class="help-section">
                    <h3>🕹️ 游戏模式</h3>
                    <ul>
                        <li><strong>经典模式</strong>：撞墙或撞到自己会结束。</li>
                        <li><strong>穿墙模式</strong>：从一侧出去会从另一侧进来，不会撞墙。</li>
                        <li><strong>计时模式</strong>：限时60秒，时间到结束，尽量拿高分。</li>
                        <li><strong>障碍模式</strong>：地图随机障碍，撞到障碍会结束。</li>
                    </ul>
                </div>

                <div class="help-section">
                    <h3>🏆 得分系统</h3>
                    <ul>
                        <li>普通食物：10分</li>
                        <li>黄金食物：50分</li>
                        <li>特殊食物：100分</li>
                        <li>彩虹食物：200分</li>
                        <li>等级奖励：每级额外10%分数加成</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>